<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <title>Title</title>

    <!--=====================================================================-->
    <script>

        //练习,屏幕显示一个会刷新时间的计时器
        //分3步
        //1.让屏幕出现6个图片数字(<img>)
        //2.让图片能显示对应的任意数字(showTime())
        //3.执行定时计划来显示&刷新当前时间( setInterval() )
        window.onload = function() {
            showTime(); //刚载入页面时候会有一瞬间显示000000,因此通过直接调用showTime来强制加载
            setInterval(showTime,1000);
        };


        function getNow() {
            let oDate = new Date();
            let hour = oDate.getHours() > 10 ? oDate.getHours() + '': '0'+oDate.getHours();
            let min = oDate.getMinutes() > 10 ? oDate.getMinutes() + '': '0'+oDate.getMinutes();
            let sec = oDate.getSeconds() > 10 ? oDate.getSeconds() + '': '0'+oDate.getSeconds();
            return hour+min+sec
        }

        function showTime() {
            let now = getNow();
            console.log(now);
            let aImg = document.getElementsByTagName('img');
            for (let i = 0; i < aImg.length; i++) {
                aImg[i].src=`img/${now[i]}.png`;    //只有ie7不可以now[i],需要now.charAt(i)
            }
        }

    </script>
</head>

<body style="background: darkgray">
<div style="text-align: center">
    <img src = "img/0.png" height = "60" width = "40"/>
    <img src = "img/0.png" height = "60" width = "40"/>
    <span style="font-size: 40px">&nbsp;:&nbsp;</span>
    <img src = "img/0.png" height = "60" width = "40"/>
    <img src = "img/0.png" height = "60" width = "40"/>
    <span style="font-size: 40px">&nbsp;:&nbsp;</span>
    <img src = "img/0.png" height = "60" width = "40"/>
    <img src = "img/0.png" height = "60" width = "40"/>
</div>


<div>

</div>

</body>
</html>